
/** @class skinSelect 
*/
var skinSelect  = new Class({
	
	Implements: Options,
	
	options: {
		liveListening: false, // ecoute les changements faits par un autre script sur le select
		openOnTop: false,
		
		
		
		maxHeight: false
	},
	
	tpl: [
			'<div class="{classes}">',
				'<a class="btn {classes}"><span>{defaultText}</span></a>',
				'<ul class="{classes}"></ul>',
			'</div>'
		].join(""),
	
	initialize: function (select){
		this.setOptions();
		// detection du mode
		this.modeOverflow = false;
		select.getParents().each(function(parent){
			if (parent.getStyle('overflow') == 'hidden' || parent.getStyle('overflow-y') == 'hidden') this.modeOverflow = true;
		}.bind(this))
		
		this.elm = select;
		this.opts = select.options;
		//this.elm.setStyle('visibility', 'hidden')
		this.struct = this.build();
		
		// set current value
		this.setValue();
		// position
		this.positionate();
		
		
		
		
		this.a.addEvent("click", function (){
			this.toggle();
		}.bind(this))
		
		this.ul.addEvent('click', function(e){
			e.stop();
			this.setValue(e.target);
		}.bind(this))
		
		
		
		
		
		
		
		
		
		
		
		Notifier.register(this, "onLayoutChanged", function (){
			this.positionate();
		}.bind(this));
		this.elm.addEvent("change", function (){
			this.setValue();
		}.bind(this))
		
		
	},
	
	textToNode: function (txt){
		var div = new Element('div', {"html":txt});
		return div.getFirst();
	},
	
	build: function (){
		var struct = this.textToNode(this.tpl.substitute({
			classes: this.elm.className,
			defaultText: getLabel(this.elm) ? getLabel(this.elm).innerHTML : this.elm.options[this.elm.selectedIndex].innerHTML
		}))
		
		this.input = new Element('input', {"type": "hidden", "name": this.elm.name});
		this.input.inject(this.elm, "after");
		this.elm.setAttribute('name', this.elm.name + "_old");
		
		
		if(this.modeOverflow){
			$(document.body).adopt(struct);
			$(document.body).adopt();
		}
		else {
			struct.inject(this.elm, "after");
		}
		
		
		this.ul = struct.getElement('ul')
		this.a = struct.getElement('a')
		for(var i=0, l=this.opts.length;i<l;i++){
			var opt = this.opts[i];
			var txt = opt.innerHTML;
			var val = opt.value || txt;
			var li = new Element("li", {'value': val, "html": "<a href='#' index='"+i+"'>"+txt+"</a>"});
			this.ul.adopt(li);
		}
		
		
		//this.elm.setStyle("opacity", "0");
		return struct;
	},
	
	destroy: function (){
		this.struct.destroy();
		this.input.destroy();
	},
	
	positionate: function (){
		var c = this.elm.getCoordinates();
		this.struct.setStyle('position', "absolute");
		this.struct.setStyle('top', c.top);
		this.struct.setStyle('left', c.left);
	},
	
	toggle: function (){
		this.ul.hasClass("hidden") ? this.open() : this.close();
	},
	
	open: function (){
		this.ul.removeClass('hidden');
		this.struct.addClass("open");
		this.ul.addClass("open");
	},
	
	close: function (){
		this.ul.addClass('hidden');
		this.struct.removeClass("open");
		this.ul.removeClass("open");
	},
	
	
	setValue: function (elm){
		if(elm){
			this.elm.selectedIndex = elm.getAttribute('index');
			this.elm.fireEvent('change');
		}
		else {
			this.input.value = this.elm.value;
			this.a.getElement('span').innerHTML = this.elm.options[this.elm.selectedIndex].innerHTML;
			this.close();
		}
	}
})
Moodule.register("skinSelect", "select.skinSelect");